<template>
	<view>
		<view class="head-tab flex-ca">
			<view class="head-view" v-for="(item,index) in butList" :key="index">
				<view class="head-time flex-ccc" :class="[index==type?'select-but':'no-select-but']"
				@click="setType(index)"
				>
				<view class="time-view">
				{{item.title}}
				</view>
				<view class="type-view">
					抢购中
				</view>
				</view>
			</view>
		</view>
		
		
		<view class="list-view">
			<view class="good-view flex-ss" v-for="(item,index) in goodsList" :key="index">
				<image src="../../static/temp/cate1.jpg" mode=""></image>
				<view class="right-view flex-cbc">
					<view class="r-title">
						asdasdasdada上啊立刻发绿山咖啡来看f
					</view>
					<view class="pro-view flex-cfs" v-if="type==0">
						<view class="cu-progress round sm">
							<view class="bg-red" :style="[{width:item.bili}]"></view>
						</view>
						<view class="p-text">
							已抢{{item.bili}}
						</view>
					</view>
					<view class="pro-view flex-cfs" v-else>
						<view class="tx-text">
							{{item.renshu}}已设置提醒
						</view>
					</view>
					
					<view class="text-view">
						<view class="flex-cb">
							<text class="je">￥136</text>
							<text class="ys">555件已售</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type:0,
				butList:[
					{title:"11:00",isStart:true},
					{title:"12:00",isStart:false},
					{title:"13:00",isStart:false},
					{title:"14:00",isStart:false},
					{title:"15:00",isStart:false},
				],
				goodsList:[
					{bili:'20%',renshu:80},
					{bili:'30%',renshu:80},
					{bili:'40%',renshu:80},
					{bili:'50%',renshu:80},
					{bili:'60%',renshu:80},
					{bili:'70%',renshu:80},
					{bili:'80%',renshu:80}
				]
			}
		},
		methods: {
			setType(e){
				this.type = e;
			}
		}
	}
</script>

<style>
	.head-tab{
		background-color: #FFFFFF;
	}
	.head-view{
		width: 150upx;
		height: 100upx;
		position: relative;
	}
	.head-time{
		width: 150upx;
		height: 100upx;
		padding: 4upx;
	}
	.time-view{
		font-size:38upx;
		font-weight:500;
	}
	.type-view{
		font-size:20upx;
		font-weight:500;
	}
	.uni-view{
	    line-height: 1;
	}
	.select-but{
		background:rgba(245,68,68,1);
		color:rgba(255,255,255,1);
	}
	.select-but:after{
		content:"";
		width: 0;
		height: 0;
		position: absolute;
		top: 100upx;
		left: calc(75upx - 14upx);
		border-width: 14upx;
		border-style: solid;
		border-color:red transparent transparent transparent;
	}
	.list-view{
		padding: 20upx;
	}
	.good-view{
		padding: 20upx;
		background:rgba(255,255,255,1);
		border-radius:8upx;
		margin-bottom: 20upx;
	}
	.good-view image{
		width:204upx;
		height:204upx;
	}
	.right-view{
		height:204upx;
	}
	.pro-view{
		width: 100%;
		height: auto;
	}
	.cu-progress{
		width: 50%;
	}
	.text-view{
		width: 100%;
	}
	.r-title{
		font-size:28upx;
		font-weight:500;
		color:rgba(60,60,60,1);
		line-height:40upx;
	}
	.je{
		font-size:34upx;
		font-weight:500;
		color:rgba(245,68,68,1);
		line-height:48upx;
	}
	.ys{
		font-size:22upx;
		font-weight:500;
		color:rgba(124,124,124,1);
		line-height:32upx;
	}
	.p-text,.tx-text{
		font-size:22upx;
		font-weight:500;
		line-height:32upx;
	}
	.p-text{
		margin-left: 20upx;
		color:rgba(124,124,124,1);
	}
	.tx-text{
		color:rgba(38,117,245,1);
	}
</style>
